<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    ul {
      width: 1000px;
      overflow: hidden;
    }

    li {
      float: left;
      display: block;
      width: 100px;
      height: 40px;
      background-color: #27343c;
      color: rgba(255, 255, 255, 0.5);
      line-height: 40px;
      text-align: center;
    }

    li:hover,
    .menu li:hover {
      color: rgba(255, 255, 255, 1);
    }

    .menu {
      position: absolute;
      width: 100px;
      left: 110px;
      top: 22px;
      /* display: none; */
    }

    .menu li {
      float: none;
      display: block;
      width: 100px;
      height: 40px;
      background-color: #27343c;
      color: rgba(255, 255, 255, 0.5);
      line-height: 40px;
      text-align: center;
    }

    .user:hover+.menu {
      display: list-item;

    }

    .menu :hover {
      display: list-item;
    }

    ul.menu::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0px;
      width: 100%;
      height: 20px;
      background: blue;
    }
  </style>
</head>

<body>
  <ul>
    <li class="home">home</li>
    <li class="buy">buy</li>
    <li class="home">home</li>
    <li class="user">user</li>
    <!-- 二级菜单 -->
    <li class="menu">
      <ul>
        <li>用户设置</li>
        <li>登出</li>
      </ul>
    </li>
  </ul>

  <hr>
  <p>自定义radio/checkbox的样式</p>
  <label for="">
    <input type="radio" value="0" name="sex">女
    <input type="radio" value="1" name="sex">男
  </label>
  <br>
  <br>
  <label for="">
    <input type="checkbox" value="0" name="sex">女
    <input type="checkbox" value="1" name="sex">男
  </label>


</body>

</html>